<template>
	<!-- 已注册的场所 -->
	<view class="safe-nav-top">
		<u-navbar
			title="已注册场所" 
			fixed
			autoBack 
		>
		</u-navbar>
		
		<div class="page-content">
			
			<div>
				<u-list
					@scrolltolower="scrolltolower"
				>
					<u-list-item
						v-for="(item, index) in myPlaceList"
						:key="item.uid"
					>
						<u-cell
							style="background-color: white;margin-bottom: 12rpx;"
							@click="onClickShowPlace(item)"
						>
							<div slot="title" style="font-size: 32rpx;font-weight: bold;margin-bottom: 12rpx;">
								{{item.placeType===1?item.placeName : item.carNo}}
							</div>
							<div slot="label">
								<div>
									<span>行政区域：</span>
									<span>{{item.areaName}}</span>
								</div>
								<div v-if="item.areaAddress">
									<span>详细地址：</span>C
									<span>{{item.areaAddress}}</span>
								</div>
								<div>
									<span>申请人：</span>
									<span>{{item.reqUsername}} {{item.reqPhone}} </span>
								</div>
							</div>
						</u-cell>
					</u-list-item>
				</u-list>
			</div>
		</div>
		
		<!-- 显示场所二维码 -->
		<u-modal :show="showQRCode" >
			<view v-if="placeItem">
				<tki-qrcode
				    ref="healthCode"
				    cid="healthCode"
				    :val="placeItem.uid"
				    :size="320"
				    :onval="true"
				    :loadMake="true"
				/>
				<div style="text-align: center;margin-top: 12rpx;font-size: 36rpx;font-weight: bold;">
					{{placeItem.placeType === 1 ? placeItem.placeName : placeItem.carNo }}
				</div>
			</view>
			
			<div slot="confirmButton">
				<u-button type="primary" text="保存图片" @click="saveQRCodeImg"></u-button>
				<div style="height: 12rpx;"></div>
				<u-button @click="showQRCode=false" text="关闭"></u-button>
			</div>
		</u-modal>
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				// 显示场所二维码
				showQRCode: false,
				// 已注册的场所
				myPlaceList: [],
				// 显示的场所数据
				placeItem: null,
			}
		},
		onReady(){
			this.getMyPlaceList();
		},
		methods: {
			// 获取已注册的场所
			getMyPlaceList(){
				this.$api.codePlace.myPlaceList().then(({data}) => {
					this.myPlaceList = data;
				});
			},
			// 滚动到底部事件
			scrolltolower() {
				console.log("滚动到底部事件");
			},
			// 点击显示场所
			onClickShowPlace(placeItem){
				this.showQRCode = true;
				this.placeItem = placeItem;
			},
			saveQRCodeImg(){
				uni.showToast({
					title: '后续开发...',
				})
			},
		}
	}
</script>

<style>

</style>
